<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>炫酷登录页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/hello.css" />
</head>
<body>
<div class="login-box">
    <h2>登录</h2>
    <form id="login-form" action="#" method="post">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit" id="login-button">登录</button>
        <div class="error-message" id="error-message"></div>
        <div class="loading-spinner" id="loading-spinner">
            <img src="https://i.imgur.com/oCgr4vc.gif" alt="Loading...">
        </div>
    </form>
    <p>还没有账号？<a href="#">立即注册</a></p>
</div>
<script>
    const loginForm = document.getElementById("login-form");
    const loginButton = document.getElementById("login-button");
    const errorMessage = document.getElementById("error-message");
    const loadingSpinner = document.getElementById("loading-spinner");

    loginForm.addEventListener("submit", (e) => {
        e.preventDefault();
        // 处理登录逻辑
        loadingSpinner.style.display = "block";
        setTimeout(() => {
            loadingSpinner.style.display = "none";
            errorMessage.style.display = "block";
            errorMessage.textContent = "用户名或密码错误！";
        }, 3000);
    });
</script>

